<template>
  <div class="heat-map">
    <div class="select-wrap">
      <el-date-picker
        class="yl-selector"
        type="datetime"
        placeholder="选择日期时间"
        align="right"
        :editable="false"
        :clearable="false"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        @change="handleChange"
        v-model="dateTime"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <div class="map-wrap">
      <el-amap ref="map" :center="center" :zoom="zoom">
        <!-- 卫星图层 -->
        <el-amap-layer-satellite></el-amap-layer-satellite>
        <!-- 热力图层 -->
        <el-amap-loca :amb-light="ambLight">
          <el-amap-loca-heatmap
            :zIndex="10"
            :sourceData="sourceData"
            :layer-style="layerStyle"
          ></el-amap-loca-heatmap>
        </el-amap-loca>
        <!-- 围堰区域 -->
        <el-amap-rectangle :bounds="bounds" />
        <!-- 围堰标识 -->
        <el-amap-label-marker
          :position="[108.607232, 21.905695]"
          :text="text"
          :icon="icon"
        />
        <!-- 虚线 -->
        <el-amap-polyline
          :path="polylinePath"
          :strokeOpacity="1"
          strokeStyle="dashed"
          strokeColor="#ffffff"
          :zIndex="200"
        ></el-amap-polyline>
        <el-amap-polyline
          :path="polylinePath2"
          :strokeOpacity="1"
          strokeStyle="dashed"
          strokeColor="#ffffff"
          :zIndex="200"
        ></el-amap-polyline>
      </el-amap>
    </div>
    <div class="map-mask"></div>
    <div class="legend-wrap">
      <p class="title">{{ legendTitle }}</p>
      <p class="item" v-for="(l, i) in legendList" :key="`legend${i}`">
        <span class="legend" :style="{ backgroundColor: l.color }"></span>
        <span class="val">{{ l.val }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { api } from "@/api/index.js";
const legendList = [
  { val: "< 1.3", color: "#da0713" },
  { val: "1.3 ~ 2", color: "#e15f00" },
  { val: "2 ~ 2.5", color: "#ecd734" },
  { val: "2.5 ~ 3", color: "#59dc18" },
  { val: "3 ~ 3.5", color: "#3ddee5" },
  { val: "3.5 ~ 4", color: "#374fff" },
];
export default {
  props: {
    handleDataTime: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const today = new Date(); // 获取今天的日期
          today.setHours(0, 0, 0, 0); // 将时分秒毫秒设为0，只比较日期部分
          const diff = time.getTime() - today.getTime(); // 计算选中日期与今天的差值
          return diff < 0 || diff >= 8 * 24 * 60 * 60 * 1000; // 只能选择从今天开始的8天
        },
      },
      dateTime: "",
      zoom: 16,
      center: [108.60340944666666, 21.91047372], // 地图中心
      ambLight: {
        intensity: 0.7,
        color: "#7b7bff",
      },
      sourceData: {},
      layerStyle: {
        radius: 10,
        unit: "meter",
        gradient: {
          0: "#da0713",
          0.3: "#e15f00",
          0.5: "#ecd734",
          0.7: "#59dc18",
          0.9: "#3ddee5",
          1: "#374fff",
        },
        value: function (index, feature) {
          return feature.properties.count;
        },
        opacity: [0.9, 1],
        min: 0,
        max: 10,
      },
      projectCode: "QJDQ",
      legendList,
      legendTitle: "",
      // 围堰
      bounds: [
        [108.606749, 21.904692],
        [108.607715, 21.906699],
      ],
      icon: {
        image: "https://a.amap.com/jsapi_demos/static/images/poi-marker.png",
        anchor: "bottom-center",
        size: [25, 34],
        clipOrigin: [718, 7],
        clipSize: [50, 68],
      },
      text: {
        content: "围堰",
        direction: "right",
        style: {
          fontSize: 18,
          fillColor: "#fff",
        },
      },
      // 虚线
      polylinePath: [
        [108.60631, 21.90453],
        [108.60623, 21.907408],
        [108.606493, 21.910061],
        [108.604278, 21.912079],
        [108.60033, 21.90965],
        [108.597954, 21.910584],
      ],
      polylinePath2: [
        [108.606686, 21.904546],
        [108.606543, 21.907487],
        [108.606829, 21.910339],
        [108.604279, 21.91255],
        [108.600371, 21.91014],
        [108.59825, 21.910847],
      ],
      //计时器
      interval: null,
    };
  },
  mounted() {
    // this.getLegendTitle();
    this.init();
    this.interval = setInterval(() => {
      const mm = this.getCurrentMinute();
      if (mm % 10 == 0) this.init();
    }, 1000 * 60);
  },
  beforeDestroy() {
    clearInterval(this.interval); // 组件销毁前清除定时器
  },
  methods: {
    async getWaterHeatmapData() {
      const { projectCode, dateTime } = this;
      const [res] = await api.getWaterHeatmapData({
        dateTime,
        projectCode,
      });
      console.log("getWaterHeatmapData", res);
      this.sourceData = {
        type: "FeatureCollection",
        features: res.data,
      };
    },
    handleChange(v) {
      const dateTime = v.slice(0, -1) + "0";
      this.dateTime = dateTime;
      this.handleDataTime(v);
      this.getWaterHeatmapData();
    },
    getDefaultDateTime() {
      var now = new Date();
      // 获取年、月、日、小时和分钟
      var year = now.getFullYear();
      var month = ("0" + (now.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1，并确保两位数格式
      var day = ("0" + now.getDate()).slice(-2); // 确保两位数格式
      var hours = ("0" + now.getHours()).slice(-2); // 确保两位数格式
      var minutes = ("0" + now.getMinutes()).slice(-2); // 确保两位数格式
      var formattedDateTime =
        year + "-" + month + "-" + day + " " + hours + ":" + minutes;
      formattedDateTime = formattedDateTime.slice(0, -1) + "0";
      this.dateTime = formattedDateTime;
    },
    init() {
      this.getDefaultDateTime();
      this.getWaterHeatmapData();
    },
    getCurrentMinute() {
      var now = new Date();
      var minute = now.getMinutes();
      return minute;
    },
    async getLegendTitle() {
      const { msg } = await this.getConfigKey(`Channel.WaterLevel.Label.QJDQ`);
      console.log("msg", msg);
      this.legendTitle = msg;
    },
  },
};
</script>
<style scoped lang='scss'>
.heat-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .select-wrap {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
    .yl-selector {
      width: 200px;
      ::v-deep .el-input__inner {
        background-color: #173d40;
        border-color: #25bade;
        color: white;

        &:hover,
        &:focus,
        &:active {
          border-color: #25bade;
        }

        &::placeholder {
          color: white;
        }
      }

      ::v-deep {
        .el-select-dropdown__item {
          text-align: center;
        }
      }
    }
  }

  .map-wrap {
    height: vh(1080px);
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    overflow: hidden;
  }
  .map-mask {
    height: vh(1080px);
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    overflow: hidden;
    background: url("~@/assets/waterLevel/bg_alpha.png");
    background-size: 100% 100%;
    pointer-events: none; /* 这里添加 pointer-events 属性 */
  }
  .legend-wrap {
    width: 140px;
    position: absolute;
    z-index: 3;
    bottom: 0;
    font-family: Microsoft YaHei;
    font-size: vh(16px);
    color: #dafdff;
    p {
      margin: 0;
    }
    .item {
      margin-top: 4px;
      .legend {
        width: 20px;
        height: 10px;
        display: inline-block;
        margin-right: 4px;
      }
    }
  }
}
</style>
